<template>
  <vxe_table
    ref="baseTable"
    :options="options"
    @handleTableBtn="handleTableBtn"
  >
    <template #btn>
      <el-button
        type="success"
        @click="handleADD"
        v-permission="['btn_product_gxProduct_add']"
        >新建共享商品模板</el-button
      >
      <el-link
          style="margin-left: 15px"
          type="primary"
          href="http://220.154.130.77:8001/temp/gx_import_template.xlsx"
          target="_blank"
        >
          <i class="el-icon-download"></i>
          下载模板</el-link
        >
    </template>
  </vxe_table>
</template>

<script>
import { list, upAndDwon, del,importLight } from "@/api/product";
import vxe_table from "@/components/table/vxe_table.vue";
import tableMixin from "@/mixins";
import { hasBtnAuth } from "@/utils";
export default {
  mixins: [tableMixin],
  components: {
    vxe_table,
  },
  data() {
    return {
      options: {
        id: "xp_table",
        apiFn: list,
        apiImport: importLight,
        import:hasBtnAuth('btn_product_gxProduct_add'),
        importKeys: {
          '名称': "name",
          '分类': "cat",
          '品牌': "brand",
          '型号': "model",
          '售价': "sellPrice",
          '系列': "series",
          "功率(W)": "power",
          '规格': "specs",
          '通道模式': "channelMode",
          '光源': "lightSource",
          '寿命': "lifeTime",
          '额定电压': "ratedVoltage",
          '频率': "frequency",
          "净重(KG)": "netWeight",
          "租金": "sellPrice",
          "服务费": "serviceFee",
          "押金": "deposit",
        },
        import: true,
        columns: [
          {
            field: "id",
            title: "ID",
          },
          {
            field: "name",
            title: "商品名称",
            search: true,
            valueType: "input",
            width: 150,
          },
          {
            field: "coverUrl",
            title: "图片",
            type: "html",
            width: 100,
            formatter: ({ row }) => {
              if (row.coverUrl) {
                return `<img src=${row.coverUrl} style="width:30px;height:30px" />`;
              } else {
                return "未上传";
              }
            },
          },
          {
            field: "catName",
            title: "类型",
            width: 100,
          },
          {
            field: "model",
            title: "产品型号",
            width: 100,
          },
          {
            field: "brandName",
            title: "品牌",
            width: 100,
          },
          {
            field: "sellPrice",
            title: "售价(元)",
            width: 100,
          },
          {
            field: "series",
            title: "系列",
            width: 100,
          },
          {
            field: "power",
            title: "功率(w)",
            width: 100,
          },
          // {
          //   field: "channelMode",
          //   title: "通道模式",
          //   width: 100,
          // },
          // {
          //   field: "frequency",
          //   title: "频率(Hz)",
          //   width: 100,
          // },
          {
            field: "specs",
            title: "规格",
            width: 100,
          },
          // {
          //   field: "lifeTime",
          //   title: "寿命",
          //   width: 100,
          // },
          {
            field: "lightSource",
            title: "光源",
            width: 100,
          },

          // {
          //   field: "netWeight",
          //   title: "净重(kg)",
          //   width: 100,
          // },

          // {
          //   field: "ratedVoltage",
          //   title: "额电压(v)",
          //   width: 100,
          // },
          {
            field: "state",
            title: "商品状态",
            search: true,
            valueType: "select",
            width: 100,
            options: [
              {
                label: "已下架",
                value: -1,
              },
              {
                label: "待上架",
                value: 1,
              },

              {
                label: "已上架",
                value: 2,
              },
              {
                label: "已创建",
                value: 0,
              },
            ],
            type: "html",
            width:150,
            formatter: ({ row }) => {
              if (row.state == 1) {
                return "<span style='color:#e6a23c'>待上架</span>";
              } else if (row.state == -1) {
                return " <span style='color:#606266'>已下架</span>";
              } else if (row.state == 2) {
                return "<span style='color:green'>已上架(下架后可编辑)</span>";
              } else if (row.state == 0) {
                return " <span style='color:#f56c6c'>已创建(编辑后可上架)</span>";
              } else {
                return "<span style='color:red'>已删除</span>";
              }
            },
          },
        ],
        btnWidth: 250,
        btn: [
          {
            title: "编辑",
            handleName: "edit",
            show: (row) =>
             ( row.state == -1||  row.state == 0) && hasBtnAuth("btn_product_gxProduct_edit"),
          },
          {
            title: "详情",
            handleName: "handleInfo",
            type: "info",
          },
          {
            title: "上架",
            handleName: "handleUp",
            type: "success",
            show: (row) =>
              row.state == 1 && hasBtnAuth("btn_product_gxProduct_set"),
          },
          {
            title: "下架",
            handleName: "handleDown",
            type: "danger",
            show: (row) =>
              row.state == 2 && hasBtnAuth("btn_product_gxProduct_set"),
          },
          {
            title: "删除",
            handleName: "handleDel",
            type: "danger",
            show: (row) =>
              row.state == -1 && hasBtnAuth("btn_product_gxProduct_del"),
          },
        ],
      },
    };
  },
  methods: {
    edit(row, index) {
      console.log(row, index);
    },
    handleADD() {
      this.$router.push({
        path: "/addProduct/addProduct",
        query: {
          type: 1,
        },
      });
    },
    handleUp(row) {
      this.$confirm("确定上架商品项", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await upAndDwon({
            id: row.id,
            state: 2,
          });
          if (res.status == 0) {
            this.$message({
              type: "success",
              message: "success",
            });
            this.success();
          }
        })
        .catch(() => {});
    },
    handleDown(row) {
      this.$confirm("确定下架商品项", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await upAndDwon({
            id: row.id,
            state: -1,
          });
          if (res.status == 0) {
            this.$message({
              type: "success",
              message: "success",
            });
            this.success();
          }
        })
        .catch(() => {});
    },
    handleDel(row) {
      this.$del({ id: row.id }, del);
    },
    edit(row) {
      this.$router.push({
        path: "/addProduct/addProduct",
        query: {
          type: 1,
          id: row.id,
        },
      });
    },
    handleInfo(row) {
      this.$router.push({
        path: "/addProduct/addProduct",
        query: {
          type: 1,
          info: true,
          id: row.id,
        },
      });
    },
  },
};
</script>
